<template>
  <div class="order-detail-orderProduct-view">

    <div style="margin-bottom: 10px;display: flex;align-items: center">
      <span style="font-size: 18px">订单预估总金额</span>

      <span class="total-price">{{ getTotal() }}元</span>

      <span v-if="datas.order.orderType == 1">(按产品市场价计算)</span>
      <span v-else-if="datas.order.orderType == 2">(按产品终端价计算)</span>
      <span v-else>(按产品交易价计算)</span>
    </div>

    <el-table
            header-cell-class-name="table-header"
        :data="datas.orderDetail"
        border
    >
      <el-table-column align="center" label="序号" type="index" width="55"/>
      <el-table-column align="left" header-align="center" label="通用名" min-width="150" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.productPopularName }}
        </template>
      </el-table-column>
      <el-table-column align="left" header-align="center" label="商品名" prop="productName" show-overflow-tooltip
                       width="100"/>
      <el-table-column align="center" header-align="center" label="包装规格" prop="packSpecs" show-overflow-tooltip
                       width="100"/>
      <el-table-column align="center" header-align="center" label="生产厂家" prop="producer" show-overflow-tooltip
                       width="100"/>
      <el-table-column v-if="datas.order.orderType == 1" align="center" header-align="center" label="市场价(元)"
                       width="100">
        <template #default="scope">
          {{ scope.row.terminalPrice }}
        </template>
      </el-table-column>
      <el-table-column v-if="datas.order.orderType == 3 || datas.order.orderType == 4" align="center" header-align="center" label="交易价(元)"
                       width="100">
        <template #default="scope">
          {{ scope.row.tradePrice }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="数量" show-overflow-tooltip width="100">
        <template #default="scope">
          {{ scope.row.putNumber / scope.row.packNum }}{{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="按计价单位数量" width="150">
        <template #default="scope">
          {{ scope.row.putNumber }}{{ getLabel('sell_unit', scope.row.sellUnit) }}
        </template>
      </el-table-column>
      <el-table-column v-if="datas.order.orderType == 2" align="center" header-align="center" label="终端价(元)"
                       width="100">
        <template #default="scope">
          {{ scope.row.terminalPrice }}
        </template>
      </el-table-column>
      <el-table-column align="right" header-align="center" label="小计(元)" show-overflow-tooltip min-width="100">
        <template #default="scope">
          {{ isInteger(scope.row.totalAmount) }}
        </template>
      </el-table-column>
      <el-table-column v-if="datas.order.orderType == 2" align="center" header-align="center" label="营销模式" show-overflow-tooltip
                       width="100">
        <template #default="scope">
          <span v-if="!scope.row.agentAttribute">终端直销</span>
          <span v-else-if="scope.row.agentAttribute == 1">区域招商</span>
          <span v-else-if="scope.row.agentAttribute == 2">精细招商</span>
        </template>
      </el-table-column>
      <el-table-column v-if="datas.order.orderType == 2" align="left" header-align="center" label="代理名称" show-overflow-tooltip
                       min-width="150">
        <template #default="scope">
          {{ scope.row.agentName }}
        </template>
      </el-table-column>
      <el-table-column v-if="datas.order.orderType == 2" align="center" header-align="center" label="交易价(元)"
                       width="100">
        <template #default="scope">
          {{ scope.row.tradePrice }}
        </template>
      </el-table-column>
      <el-table-column v-if="datas.order.orderStatus > 1" align="center" header-align="center" label="已发货数量"
                       min-width="150" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.deliveryNum">{{ scope.row.deliveryNum }}{{
              getLabel('sell_unit', scope.row.sellUnit)
            }}</span>

        </template>
      </el-table-column>
      <el-table-column v-if="datas.order.orderStatus > 1" align="center" header-align="center" label="剩余待发货"
                       min-width="150" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.putNumber - scope.row.deliveryNum }}{{ getLabel('sell_unit', scope.row.sellUnit) }}
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'OrderProductView',
  props: {
    list: {
      type: Array,
      default: []
    },
    datas: {
      type: Object,
      default: {
        orderDetail: []
      }
    }
  },
  setup(props) {
    var data = reactive({})

    const getTotal = () => {
      let num = 0
      for (let i = 0; i < props.datas.orderDetail.length; i++) {
        num += props.datas.orderDetail[i].totalAmount
      }
      const str = num.toFixed(2)

      return Number(str)
    }

    return {
      ...toRefs(data),

      getTotal,
    }
  }
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";

.order-detail-orderProduct-view {
  .total-price {
    margin: 0 $block-x;
    color: $assist-color
  }
}
</style>
